#content{
  height: 290px;
  overflow: hidden;
}
section{
  width:270px;
  padding:1px;
}
section:first-child{
  height:286px;
  overflow: hidden;
  position:relative;

}
#background-blur{
  width:100%;
  height:600px;
  position: absolute;
  z-index: -1;
  background-size: cover;
  background-repeat:no-repeat;
  /*background-image: url("");*/
  background-position: top center;
  filter:blur(70px);
  transition: background-image ease-in-out 0.3s;
}
#pic{
  width:246px;
  height:246px;
  margin: 8px;
  /*background-image: url("");*/
  background-size:cover;
  background-origin: border-box;
  border:3px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  /*启动硬件加速*/
  transform: translateZ(0);
  transition: background-image ease-in-out 0.3s;
}
/*#disk{*/
  /*height:20%;*/
  /*width:20%;*/
  /*margin:40%;*/
  /*border:2px solid rgba(255,255,255,0.4);*/
  /*background-color: rgba(255,255,255,0.3);*/
  /*border-radius: 50%;*/
/*}*/
/*#disk>div{*/
  /*height: 30%;*/
  /*width: 30%;*/
  /*margin: 35%;*/
  /*background-color: rgba(255, 255, 255, 0.47);*/
  /*border:1px solid rgba(255,255,255,0.5);*/
  /*border-radius: 50%;*/
/*}*/
#setting{
  margin-left: -1px;
  width: 100%;
  height:60px;
  position:absolute;
  bottom:0px;
  background-color: rgba(0,0,0,0);
  transition:background-color ease-in 0.3s 0.3s;
}
.cover{
  position:absolute;
  width: 100%;
  height:inherit;
  bottom: 0px;
  z-index:1;
  transition:bottom ease-in-out 0.5s;
}
.cover>div{
  height:28px;
}
#title{
  text-align: center;
  background-color: rgba(0,0,0,0.4);
}
.songInfo{
  display: inline-block;
  font-size:13px;
  font-weight: 500;
  color:white;
  width:100px;
  padding:6px;
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow: hidden;
}
.songInfo:first-child{
  margin-right: 20px;
  text-align: right;
}
.songInfo:last-child{
  margin-left: 20px;
  text-align: left;
}
/*播放控件*/
#controlArea{
  overflow: hidden;
  height:inherit;
  text-align: center;
  transition:opacity ease-in-out 0.3s 0.3s;
  opacity:0;
}
.controls{
  margin:10px;
}
.icons{
  cursor: pointer;
  display: inline-block;
  position:relative;
  border-style: solid;
  border-color:transparent;
}
.icons::before,.icons::after{
  position:absolute;
}
/*进度条*/
.progressBar{
  cursor: pointer;
  width:252px;
  height: 2px;
  border-width:2px 0px;
  border-style:solid;
  border-color:transparent;
  margin-top: 7px;
  margin-bottom:0px;
  background-color: rgba(0,0,0,0.3);
  background-clip:content-box;
}
.progressBar>div{
  cursor: pointer;
  width: 60%;
  height: inherit;
  background-color: white;
}
.barEnd{
  cursor: inherit;
  display:block;
  width: 6px;
  height: 300%;
  border:2px solid transparent;
  margin-left: 100%;
  border-radius: 50%;
  transform: translate(-50%,-47%);
  background-color: inherit;
  background-clip: content-box;
}

/*播放*/
.toPlay{
  border-width: 10px 0px 10px 14px;
  border-left-color:white;
}
/*暂停*/
.toPause{
  width: 4px;
  height: 20px;
  border-width: 0px 5px;
  border-color:transparent white;
}
/*上下曲按键*/
.last,.next{
  margin-bottom: 13px;
  border-color:transparent white;
}
.last{
  border-width: 7px 9px 7px 0px;
}
.next{
  border-width: 7px 0px 7px 9px;
}
.last::before,.next::after{
  height:14px;
  content: '.';
  color:white;
  background-color: white;
  top:-7px;
}
.last::before{
  left:-2px;
}
.next::after{
  right:-2px;
}

.volume,.volume::before,.volume::after{
  border-width:10px 21px 10px 0px;
  border-radius:50%;
}
.volume{
  border-right-color:white;
  margin-right: 2px;
}

.volume::before,.volume::after{
  content:'';
  border-style: solid;
  border-color: transparent white;
  top:-10px;
  left:0px;

}
.volume::before{
  border-right-color: rgba(0,0,0,0.4);
  border-width:10px 18px 10px 0px;
}
.volume::after{
  border-right-width:16px;
}
.volumeBar{
  display: inline-block;
  width: 55px;
  height: 2px;
  margin: 19px 10px 19px 0px;
}

.topList{
  width:4px;
  height:20px;
  border-width:1px;
  border-color:white;
  background-color: white;
}
.topList::before,.topList::after{
  content:'';
  width:inherit;
  border:inherit;
  background-color: inherit;
  bottom:-1px;
}
.topList::before{
  height:70%;
  left:calc(-150% - 2px);
}
.topList::after{
  height:45%;
  right:calc(-150% - 2px);
}